<template>
	<view>

		<view style="position: relative;">
			<view
				style="display: flex; flex-direction: column;padding: 106rpx 0 0 30rpx;box-sizing: border-box;font-size: 48rpx;color: #fff; height: 534rpx;background-color: #00C657;line-height: 72rpx; border-radius: 0 0 20% 20%;">
				<text>您好,</text>
				<text>欢迎登录蜀香客</text>
			</view>
			<view
				style="width: 690rpx;height: 419rpx;position: absolute;top: 281rpx;left: 30rpx;background-color: #fff;border-radius: 24rpx;">
				<!-- 头部选项卡 -->
				<view class="head-nav">
					<view>登录</view>
				</view>
				<view>
					<view class="content">
						<text>账号</text>
						<text style="padding-left: 20rpx;padding-right: 20rpx;">|</text>
						<input v-model="phone" focus
							style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
						<view style="width: 26rpx;height: 25rpx;padding-left:70rpx;padding-top: 50rpx;"
							mode="aspectFit">
						</view>
					</view>
					<view class="content" style="margin-top: 40rpx;">
						<text>密码</text>
						<text style="padding-left: 20rpx;padding-right: 20rpx;">|</text>
						<input v-model="password" focus type="password"
							style="height: 114rpx;line-height: 114rpx;font-size: 36rpx;color: #000;" />
						<view style="width: 26rpx;height: 25rpx;padding-left:70rpx;padding-top: 50rpx;"
							mode="aspectFit">
						</view>
					</view>
					<view @click="login">
						<button type="default" @click.stop="login"
							style=" margin: 0 auto;line-height: 100rpx;margin-bottom: 20rpx; margin-top: 80rpx; background-color: #00C657;border-radius: 24rpx;width: 95%;height: 100rpx;color: #fff;font-size: 30rpx;">
							登录
						</button>
					</view>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		Storage
	} from "@/static/libs/utils";
	export default {
		data() {
			return {
				phone: '17000000000',
				password: 'a123456789'
			}
		},
		methods: {
			async login() {
				await this.$request.post(
						'waimai_go/web/wmerchant.php?c=site&a=entry&ctrl=store&ac=oauth&op=login&do=web&m=we7_wmall&i=1&isajax=1', {
							username: this.phone,
							password: this.password,
							submit: "登录"
						})
					.then(res => {
						console.log(res);
						if (res.data.type === 'success') {
							//登陆成功，保存token,昵称以及openid
							Storage.set("token", res.data.data.token);
							Storage.set("openid", res.data.data.openid);
							Storage.set("nickname", res.data.data.nickname);

							uni.switchTab({
								url: "/pages/index/index"
							});	

							uni.showToast({
								title: "登录成功",
								icon: 'success',    //如果要纯文本，不要icon，将值设为'none'
								duration: 1500
							})
							
							
						}else{
							uni.showToast({
								title: '登录失败，账号或密码错误',
								icon: 'cancel',    //如果要纯文本，不要icon，将值设为'none'
								duration: 2000    //持续时间为 2秒
							}) 
						}
					})

			}
		}
	}
</script>

<style lang="scss">
	.activite {
		color: #00C657;
	}

	.head-nav {
		font-size: 36rpx;
		padding: 57rpx 150rpx 50rpx;
		text-align: center;
	}

	.content {
		display: flex;
		flex-wrap: nowrap;
		width: 632rpx;
		height: 114rpx;
		background-color: #f7f7f7;
		line-height: 114rpx;
		padding-left: 38rpx;
		border-radius: 14rpx;
		font-size: 28rpx;
		color: #999;
		margin: 0 auto;
	}

	.qt {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;

		text {
			font-size: 24rpx;
			color: #999;
			margin: 200rpx auto 100rpx;
		}

		view {
			width: 269rpx;
			height: 2rpx;

			&:first-of-type {
				background: #eeeeee;
				margin-left: -20rpx;
				margin-top: 100rpx;
			}

			&:last-of-type {
				background: #eeeeee;
				margin-right: -20rpx;
				margin-top: 100rpx;
			}
		}
	}

	.xy {
		font-size: 24rpx;
		color: #999;
		margin-top: 40rpx;
		text-align: center;
	}
</style>
